import React from 'react';
import {
  Form, Button, Select,
} from 'antd';
import has from 'lodash/fp/has';
import ParamFormItem from 'components/ParamFormItem';
import { FieldTypes, ComparisonOperators, comparisonOpsNames } from '../constants';

const { Option } = Select;

const comparisonOptions = {
  [FieldTypes.STRING]: <Option value={ComparisonOperators.EQUAL}>{comparisonOpsNames.eq}</Option>,
  [FieldTypes.NUMBER]: [
    <Option key={ComparisonOperators.GREATERTHAN}>{comparisonOpsNames.gt}</Option>,
    <Option key={ComparisonOperators.LESSTHAN}>{comparisonOpsNames.lt}</Option>,
    <Option key={ComparisonOperators.EQUAL}>{comparisonOpsNames.eq}</Option>,
    <Option key={ComparisonOperators.NOTEQUAL}>{comparisonOpsNames.ne}</Option>,
    <Option key={ComparisonOperators.GREATEREQUAL}>{comparisonOpsNames.ge}</Option>,
    <Option key={ComparisonOperators.LESSEQEUAL}>{comparisonOpsNames.le}</Option>,
  ],
  [FieldTypes.REFERENCE]:
  <Option value={ComparisonOperators.EQUAL}>{comparisonOpsNames.eq}</Option>,
};

// TODO: Add data type hint
class ExpressionForm extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;
    this.modeler = null;
    this.chosenId = null;
    this.state = {
      expressionType: FieldTypes.NUMBER,
    };
  }

  handleSubmit = async (e) => {
    e.preventDefault();
    const {
      form: { getFieldsValue, validateFieldsAndScroll },
      updateBPMN,
      closeModal,
    } = this.props;

    try {
      await validateFieldsAndScroll();
      const { middle, params } = getFieldsValue();
      // 'left' and 'right' should be keys of either 'params.args' or 'params.input'
      const left = has('left', params.args)
        ? `lit: ${params.args.left}`
        : `ref: ${params.input.left.join('.')}`;
      const right = has('right', params.args)
        ? `lit: ${params.args.right}`
        : `ref: ${params.input.right.join('.')}`;

      updateBPMN(left, middle, right);

      closeModal();
    } catch (err) {
      console.error(err);
    }
  }

  render() {
    const { form: { getFieldDecorator }, taskOutput } = this.props;
    const { expressionType } = this.state;
    return (
      <Form
        labelCol={{ xs: { span: 24 }, sm: { span: 6 } }}
        wrapperCol={{
          xs: { span: 24 },
          sm: { span: 18 },
        }}
        onSubmit={this.handleSubmit}
      >
        <ParamFormItem
          param={{ label: '表达式左值', name: 'left' }}
          getFieldDecorator={getFieldDecorator}
          taskOutput={taskOutput}
        />
        <Form.Item label="比较运算符">
          {getFieldDecorator('middle', {
            rules: [
              {
                required: true,
                message: '请选择比较运算符!',
              },
            ],
          })((
            <Select>{comparisonOptions[expressionType]}</Select>
          ))}
        </Form.Item>
        <ParamFormItem
          param={{ label: '表达式右值', name: 'right' }}
          getFieldDecorator={getFieldDecorator}
          taskOutput={taskOutput}
        />
        <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
          确定
        </Button>
      </Form>
    );
  }
}

export default Form.create({})(ExpressionForm);
